<template>
	<view>
		<!-- 组件搜索区域 -->
		<my-search @click="goToSearch"></my-search>
		<!-- 主体内容 -->
		<view class="scroll-view-container">
			<!-- 左侧滑动区域 -->
			<scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
				<block v-for="(item, index) in cateList" :key="index">
					<view :class="{'scroll-view-left-item': true, 'active': index === active? true : false }"
						@click="changeActive(index)">{{ item.cat_name}}</view>
				</block>
			</scroll-view>
			<!-- 右侧滑动区域 -->
			<scroll-view class="scroll-view-right" scroll-y="true" :style="{height: windowHeight + 'px'}"
				:scroll-top="scrollTop">
				<view class="scroll-view-right-box" v-for="(item2, index2) in cateList2" :key="index2">
					<!-- 二级标题 -->
					<view class="scroll-view-right-title" v-if="item2.cat_name !== '冲锋衣'">/{{ item2.cat_name }}/</view>
					<!-- 动态渲染三级分类的列表数据 -->
					<view class="cate-lv3-list">
						<!-- 三级分类 Item 项 -->
						<view class="cate-lv3-item" v-for="(item3, index3) in item2.children" :key="index3">
							<!-- 图片 -->
							<image :src="item3.cat_icon" class="cate-lv3-item-pic" @click="gotoGoodsList(item3)"></image>
							<!-- 文本 -->
							<view class="cate-lv3-item-size">{{ item3.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import tabBarIndex from '@/mixins/tabbar-badge.js'
	export default {
		// 将 tabBarIndex 混入到当前的页面中进行使用
		mixins: [tabBarIndex],
		data() {
			return {
				// 当前页面的整体高度
				windowHeight: 0,
				// 一集分类数据列表
				cateList: [],
				// 二集分类数据列表
				cateList2: [],
				// 改变样式
				active: 0,
				// 点击重置滑动轮高度
				scrollTop: 0
			};
		},
		onLoad() {
			// 获取当前页面的整体高度
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight + 50
			// 调用函数
			this.getCateList()
		},
		methods: {
			// 获取分类列表数据
			async getCateList() {
				const res = await uni.$http.get('/api/public/v1/categories')
				// 请求失败
				if (res.data.meta.status !== 200) return uni.showToast()
				// 请求成功
				this.cateList = res.data.message
				// 获取二级分类列表
				this.cateList2 = res.data.message[0].children
			},

			// 点击跳转分类页面
			changeActive(index) {
				this.active = index
				// 获取点击后的一级列表中的二级分类列表
				this.cateList2 = this.cateList[index].children
				// 重置滑动轮高度
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},

			// 点击图片跳转页面
			gotoGoodsList(item3) {
				uni.navigateTo({
					url: `/subpackages/goods_list/goods_list?cid=${ item3.cat_id }`
				})
			},
			
			// 跳转到搜索页面
			goToSearch() {
				uni.navigateTo({
					url: "/subpackages/search/search"
				})
			},
		}
	}
</script>

<style lang="scss">
	.scroll-view-container {
		display: flex;

		// 左边内容
		.scroll-view-left {
			width: 120px;

			.scroll-view-left-item {
				text-align: center;
				line-height: 60px;
				font-size: 12px;
				background-color: #f7f7f7;
			}

			.active {
				background-color: #ffffff;
				position: relative;
			}

			.active::before {
				content: ' ';
				display: block;
				width: 30px;
				height: 3px;
				background-color: #c00000;
				position: absolute;
				left: 0;
				bottom: 2%;
				transform: translateX(100%);
			}
		}

	}

	// 右边内容
	.scroll-view-right {
		background-color: #fff;
	}

	.scroll-view-right-title {
		font-size: 12px;
		font-weight: 700;
		text-align: center;
		padding: 15px 0;
		background-color: #fff;
		color: #c00000;
	}

	.cate-lv3-list {
		display: flex;
		flex-wrap: wrap;
	}

	.cate-lv3-item {
		width: 33.3%;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cate-lv3-item-pic {
		width: 60px;
		height: 60px;
	}

	.cate-lv3-item-size {
		font-size: 12px;
	}
</style>